<template>
  <div id="app">
    <!--面包屑-->
    <div class="bread" style="width: 100%;height: 30px;">
      <div class="bread_content" style="margin: auto">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>培训通后台管理</el-breadcrumb-item>
          <el-breadcrumb-item>资讯管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

    </div>
    <!--列表展示-->
    <div style="width: 100%;height: 520px;background-color: white;padding-top: 20px">
      <div style="width: 1200px;height: 430px;margin: auto;">
        <!--添加课程-->
        <div class="add_content">
          <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">添加资讯</el-button>
        </div>
        <!--展示界面-->
        <div class="table">
          <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
            <el-table-column prop="id" label="资讯编号" width="100"></el-table-column>
            <el-table-column label="图片" width="120px">
              　　<template slot-scope="scope">
              　　　　<img :src="'static/News_img/'+scope.row.img" width="40" height="40" class="head_pic"/>
              　　</template>
            </el-table-column>
            <el-table-column prop="title" label="资讯标题" width="220"></el-table-column>
            <el-table-column prop="name" label="发布机构" width="100px"></el-table-column>
            <el-table-column prop="time" label="发布时间" width="200px"></el-table-column>
            <el-table-column prop="look" label="浏览次数" width="110px"></el-table-column>
            <el-table-column prop="memo" label="备注" width="100px"></el-table-column>
            <el-table-column  label="操作">
              <template slot-scope="scope">
                <el-button icon="el-icon-edit" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                <el-button icon="el-icon-delete" size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--分页-->
      <div style="margin-left: 23px;margin-top: 30px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="tableData.length">
        </el-pagination>
      </div>
    </div>
    <!--添加页面-->
    <el-dialog title="输入信息" :visible.sync="dialogFormVisible">
      <el-form :model="New">
        <el-form-item label="资讯标题：" :label-width="formLabelWidth">
          <el-input v-model="New.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发布机构：" :label-width="formLabelWidth">
          <el-input v-model="New.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发布时间：" :label-width="formLabelWidth">
          <el-date-picker v-model="New.time" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="浏览次数：" :label-width="formLabelWidth">
          <el-input v-model="New.look" autocomplete="off"></el-input>
        </el-form-item>
        <!--文件上传-->
        <el-form :model="form">
          <el-form-item label="上传文件：" :label-width="formLabelWidth">
            <el-upload ref="uploadDemo" action="http://localhost:8066/news/elupload" :auto-upload="false" multiple
                       :file-list="fileList">
              <el-button size="small" type="primary">选择文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <el-form-item label="备注：" :label-width="formLabelWidth">
          <el-input v-model="New.memo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNews()">添 加</el-button>
      </div>
    </el-dialog>
    <!--修改信息界面-->
    <el-dialog  title="修改信息" :visible.sync="updateFormVisible">
      <el-form :model="Inform">
        <el-form-item label="资讯标题：" :label-width="formLabelWidth">
          <el-input v-model="Inform.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发布机构：" :label-width="formLabelWidth">
          <el-input v-model="Inform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发布时间：" :label-width="formLabelWidth">
          <el-date-picker v-model="Inform.time" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="浏览次数：" :label-width="formLabelWidth">
          <el-input v-model="Inform.look" autocomplete="off"></el-input>
        </el-form-item>
        <!--文件上传-->
        <el-form :model="form">
          <el-form-item label="上传文件：" :label-width="formLabelWidth">
            <el-upload ref="uploadDemo" action="http://localhost:8066/news/elupload" :auto-upload="false" multiple
                       :file-list="fileList">
              <el-button size="small" type="primary">选择文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <el-form-item label="备注：" :label-width="formLabelWidth">
          <el-input v-model="Inform.memo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateNews()">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "CourseAdmin",
    data() {
      return {
        dialogFormVisible: false,//添加页面
        updateFormVisible:false,//修改页面
        currentPage:1, //初始页
        pageSize:5,    //每页的数据
        New:{},  //添加中转站
        Inform:{},//查询的单个存储
        tableData: [{}],
        /*图片上传代码，勿动*/
        formLabelWidth: '100px',
        form: {file: ''},
        fileList: []
      }
    },
    methods:{
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pagesize = size;
        console.log(this.pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        console.log(this.currentPage)  //点击第几页
      },
      /*查询所有资讯*/
      findAll(){
        let _this = this
        this.$axios.get("http://localhost:8066/news/getNews").then(function(res){
          _this.tableData = res.data
          console.log(res.data)
        }).catch(function (err) {
          alert('查询失败')
        })
      },
      /*添加资讯*/
      addNews(){
        if(!this.New.title){alert('请输入课程标题');return false}
        if(!this.New.name){alert('请输入机构名称');return false}
        if(!this.$refs.uploadDemo.uploadFiles[0].name){alert('请上传文件！');return false}
        if(!this.New.time){alert('请输入时间');return false}
        if(!this.New.look){alert('请输入浏览次数');return false}
        if(!this.New.memo){alert('请输入备注');return false}
        this.$refs.uploadDemo.submit()
        this.New.img = this.$refs.uploadDemo.uploadFiles[0].name
        console.log(this.New)
        let _this = this
        this.$axios.post("http://localhost:8066/news/setNews",this.New).then(function () {
          //清空本次保存数据
          alert("机构信息添加成功！")
          _this.School = {};
          _this.dialogFormVisible = false
          _this.findAll();
        }).catch(function (err) {
          alert("机构信息添加失败，请稍后再试")
        })
      },
      /*根据id查询资讯*/
      handleEdit(id){
        this.updateFormVisible=true
        let _this = this
        this.$axios.get("http://localhost:8066/news/getNewsById/"+id).then(function(res){
          _this.Inform = res.data
        }).catch(function (err) {
          alert('查询失败')
        })
      },
      /*更新资讯*/
      updateNews(){
        let _this = this
        // 发送axios请求，根据查询一个
        console.log("!"+ _this.Inform)
        this.$axios.post("http://localhost:8066/news/updateNews",_this.Inform).then(function (res) {
          alert('资讯信息修改成功!')
          _this.updateFormVisible = false
          _this.findAll();
        }).catch(function (err) {
        })
      },
      /*删除资讯*/
      handleDelete(id){
        let _this = this
        console.log(id)
        if(window.confirm('确定要删除资讯吗？')){
          // 发送axios请求，根据查询一个
          this.$axios.post("http://localhost:8066/news/deletedById/"+id).then(function () {
            _this.findAll();
            alert("资讯删除成功！")
          }).catch(function (err) {
            console.log(id)
            alert("删除失败,请联系管理员！")
          })
        }
      }
    },
    //初始化阶段 brforeCreate 内部事件 生命周期
    created(){
      this.findAll();
    }
  }
</script>

<style scoped>

</style>
